import cake from "./styles/cakeInfo.module.css"
import TopNavict from "../compoments/TopNavict"
import BottomBavict from "../compoments/bottomnav" 
import CakeOrder from "../compoments/cakeOrder"
import Tips from "../compoments/tips"
import { useState } from "react"
import { message } from "antd"

const cake_ = {
    name:"荔来香\n¥229.00",
    url:"https://jimucake.com/pic/thumb/img/upload@_@2022@_@05@_@13@_@20220513170229191.jpg/w/186/h/186",
}

const others = [
    "免费蜡烛1跟+帽子",
    "不要蜡烛和数字蜡烛请备注"
]

const CakeInfo = () =>{
    const [count,setCount] = useState(1)
    const [messageApi, contextHolder] = message.useMessage();
    const sub = () =>{
        setCount(count+1)
    }
    const dec = () =>{
        if(count === 1){
            messageApi.open({
                type: 'error',
                content: '请最少选择1份',
            });
        }else{
            setCount(count-1)
        }
    }
    const Buy = () => {
        console.log(count);
    }
    return (
        <div className={cake.app}>
            {contextHolder}
            <TopNavict />
            <div className={cake.line}>
            </div>
            <div>
                <div className={cake.option}>
                    <div className={cake.option_left}>
                        <img src={cake_.url} alt="" />
                    </div>
                    <div className={cake.option_right}>
                        <div className={cake.cake_name}>
                            {cake_.name.split("¥")[0]}
                            <div className={cake.spa}></div>
                        </div>
                        <div className={cake.price}>
                            ¥{cake_.name.split("¥")[1]}
                        </div>
                        <div className={cake.guid}>
                            1磅(约454g)
                        </div>
                        <div className={cake.desc}>
                            <div className={cake.img}>
                                <div className={cake.img_info}>
                                    <img src="https://jimucake.com/views/default/skin/default/images/pic2/1.png" alt="" />
                                    <span style={{margin:10}}>约13cm*13cm</span>
                                </div>
                                <div className={cake.img_info}>
                                    <img src="https://jimucake.com/views/default/skin/default/images/pic2/2.png" alt="" />
                                    <span style={{margin:10}}>建议3-4人分享</span>
                                </div>
                            </div>
                            <div className={cake.img}>
                                <div className={cake.img_info}>
                                    <img src="https://jimucake.com/views/default/skin/default/images/pic2/2.png" alt="" />
                                    <span style={{margin:10}}>含5套餐具</span>
                                </div>
                                <div className={cake.img_info}>
                                    <img src="https://jimucake.com/views/default/skin/default/images/pic2/4.png" alt="" />
                                    <span style={{margin:10}}>提前4小时预定</span>
                                </div>
                            </div>
                        </div>
                        <div className={cake.other}>
                            {
                                others.map((item,index) => (
                                    <div key={index} className={cake.txt}>
                                        {item}
                                    </div>
                                ))
                            }
                        </div>
                        <div className={cake.count}>
                            <div className={cake.count_opt} onClick={dec}>-</div>
                            <div className={cake.count_num}>{count}</div>
                            <div className={cake.count_opt} onClick={sub}>+</div>
                        </div>
                        <div className={cake.btn}>
                            <div className={cake.btn_} onClick={Buy}>立即购买</div>
                            <div className={cake.btn_}>加入购物车</div>
                        </div>
                    </div>
                </div>
                <CakeOrder cake={cake_} />
                <Tips />
            </div>
            <BottomBavict />
        </div>
    )
}

export default CakeInfo